<template>
	<div>
		<el-row v-for="(a, ai) in form.dataList" :key="ai" style="clear: both">
			<el-col :span="22">
				<el-col :span="5" v-if="isShowImg">
					<el-form-item label="图片">
						<sc-upload-multiple v-model="a.img" :baseUrl="baseUrl" title="选择图片" />
					</el-form-item>
				</el-col>
				<el-col :span="19">
					<el-row>
						<el-col :span="24">
							<el-form-item label="标题" v-if="isShowTitle">
								<el-input v-model="a.title" />
							</el-form-item>
						</el-col>
						<form-diy-link-select
							ref="picture-form"
							v-model:type_id="a.type_id"
							v-model:link="a.link"
							:linkSpan="17"
						/>
					</el-row>
				</el-col>
			</el-col>
			<el-col :span="2">
				<div style="display: flex">
					<el-button @click="addRow" :disabled="!isShowAddBtn">加</el-button>
					<el-button @click="upRowSort(ai)" :disabled="ai === 0">上</el-button>
				</div>

				<div style="margin-top: 20px; display: flex">
					<el-button @click="delRow(ai)" :disabled="!isShowDelBtn">减</el-button>
					<el-button @click="downRowSort(ai)" :disabled="ai === (form.dataList.length-1)">下</el-button>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import FormDiyLinkSelect from "./formDiyLinkSelect.vue";
import { ElNotification } from "element-plus";
export default {
	name: "form-diy-title-link-select",
	components: { FormDiyLinkSelect },
	props: {
		isShowImg: { type: Boolean, default: true },
		isShowTitle: { type: Boolean, default: true },
		baseUrl: { type: String, default: "" }
	},
	emits: ["update:type_id", "update:link"],
	data() {
		return {
			dataListMax: 5,
			form: {
				dataList: []
			},
			options: [
				{
					value: "1",
					label: "商品详情"
				},
				{
					value: "2",
					label: "商品列表分类"
				},
				{
					value: "3",
					label: "新闻"
				},
				{
					value: "4",
					label: "新闻列表分类"
				},
				{
					value: "9999",
					label: "外链"
				}
			]
		};
	},
	computed: {
		isShowAddBtn() {
			return this.form.dataList.length < this.dataListMax;
		},
		isShowDelBtn() {
			return this.form.dataList.length > 1;
		}
	},
	mounted() {},
	methods: {
		typeIdChange(_val) {
			console.log(_val);
		},
		inputPlaceholder(typeId) {
			if (typeId == "") {
				return "请选择链接类型";
			}
			if (typeId == "9999") {
				return "请输入外链";
			} else {
				return "请输入" + this.getOptionsOne(typeId).label + "ID";
			}
		},
		getData() {
			return this.form;
		},
		initData(dataListMax, dataList) {
			this.form.dataList = dataList;
			this.dataListMax = dataListMax;
		},
		addRow() {
			if (!this.isShowAddBtn) {
				ElNotification.error("最多不能超过" + this.dataListMax + "条");
				return false;
			}
			this.form.dataList.push({
				img: "",
				title: "",
				type_id: "",
				link: ""
			});
		},
		delRow(_index) {
			if (!this.isShowDelBtn) {
				ElNotification.error("必须保留一条");
				return false;
			}
			this.form.dataList.splice(_index, 1);
		},
		getOptionsOne(_val) {
			const tmp = this.options.filter((item) => {
				return item.value == _val;
			});
			if (tmp.length > 0) {
				return tmp[0];
			} else {
				return {
					value: "-1",
					label: "未知"
				};
			}
		},
		swapItems(arr, index1, index2) {
			arr[index1] = arr.splice(index2, 1, arr[index1])[0];
			return arr;
		},
		upRowSort(index) {
			if (index === 0) {
				return;
			}
			this.swapItems(this.form.dataList, index, index - 1);
		},
		downRowSort(index) {
			if (index === this.form.dataList.length - 1) {
				return;
			}
			this.swapItems(this.form.dataList, index, index + 1);
		}
	}
};
</script>
